Create popup effect for Contact Form 7

Popup is a website effect that allows a table to appear when clicking a button or link, displaying content like banners, images, promotions, or contact forms. To create a popup effect for Contact Form 7, the Easy FancyBox plugin is recommended. After installation and activation, the plugin provides instructions for various cases, including inserting a popup for Contact Form 7. By editing the provided sample code and inserting it into a new page or post, a Contact Us link can be created to display a popup contact form. The plugin can also help insert a fixed quick contact button into the header of a Flatsome theme.

Popup is a website effect that allows a table to appear when you click on a button or link. The table content can be a banner, image, promotion, or a quick contact form.

In this article, I will guide you create popup effect for Contact Form 7 supported with plugin Easy FancyBox.

Easy FancyBox is a plugin that allows you to display images, videos, forms, text, etc. as popups.

Table of Contents

Install Easy Fancy Box

You can search and install the plugin Easy FancyBox in the plugin management page and then activate it.

Go to the menu Plugins > Installed Plugins.
Click on the Easy FancyBox plugin you just installed and select See details.

In the plugin details table that appears, switch to the Answer tab. Here you’ll find instructions on how to use this plugin for various cases, including inserting a popup for Contact Form 7. However, you may need to edit the sample code provided to make it usable.

To create a popup effect for Contact Form 7, follow these steps:

Create a new page or post and name it.
Go to the Document tab and copy-paste the edited code into it:

<a class="fancybox" href="#contact_form_pop">Contact Us</a>
<div class="fancybox-hidden" style="display: none;">
    <p>[contact-form-7  title="Contact form"]</p>
</div>

Remember to replace the Contact Form 7 shortcode with your own. Then post the page/article.

To display the Contact Us button form instead of link, add the class button for the <a> tag in the code above. Like this:

<a class="fancybox button primary is-primary is-medium" href="#contact_form_pop">Contact Us</a>

Save and review your changes. You should now see the button displayed on your page, making it look nicer.

If you want to insert the button into the web source code, use the following code to insert into the php file:

<a class="fancybox" href="#contact_form_pop">Contact Us</a>
<div class="fancybox-hidden" style="display: none;">
    <?php echo do_shortcode('[contact-form-7  title="Contact form"]'); ?>
</div>

Conclusion

Creating a contact form with the help of the Easy FancyBox plugin is quick and easy. You can also insert it into the header of your Flatsome theme to create a fixed quick contact button with a professional popup form.

5/5 - (2 votes)

Create popup effect for Contact Form 7

Install Easy Fancy Box